import {ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable, Injector,EmbeddedViewRef} from "@angular/core";
import {screenHelper} from "../screen.helper";

@Injectable()
export class DfModalService{
    constructor(
        private resolver: ComponentFactoryResolver,
        private applicationRef: ApplicationRef,
        private injector: Injector,
    ) {}
    private mask:HTMLDivElement;
    protected list: ComponentRef<any>[] = [];

    /**
     * 销毁
     *
     * @param component 下标（从0开始或组件引用对象），或不指定时，销毁最新一个
     */
    destroy(component?: number | ComponentRef<any>) {
        if (typeof component === 'number') component = this.list[<number>component];
        if (!component) component = this.list.pop();
        if (component) (<ComponentRef<any>>component).destroy();
        if(!this.list.length && this.mask){
            document.body.removeChild(this.mask);
            delete this.mask;
        }
    }

    /**
     * 销毁所有
     */
    destroyAll() {
        for (const component of this.list) this.destroy(component);
        if(this.mask){
            document.body.removeChild(this.mask);
            delete this.mask;
        }
    }

    /** 动态构建组件 */
    public show<T>(component: { new (...args: any[]): T },isFull:boolean=false,center:boolean=false): ComponentRef<T> {
        const componentFactory = this.resolver.resolveComponentFactory(component);
        const componentRef = componentFactory.create(this.injector);
        this.list.push(componentRef);
        const componentRootNode = (componentRef.hostView as EmbeddedViewRef<any>)
            .rootNodes[0] as HTMLElement;
        this.applicationRef.attachView(componentRef.hostView);
        componentRef.onDestroy(() => {
            this.applicationRef.detachView(componentRef.hostView);
        });
        componentRootNode.style.position="fixed";
        if(isFull){
            componentRootNode.style.top="0";
            componentRootNode.style.height=screenHelper.screenHeightInRem+"rem";
        }else{
            componentRootNode.style.bottom="0";
            componentRootNode.style.maxHeight=screenHelper.screenHeightInRem+"rem";
            if(center){
                componentRootNode.style.left="0";
                componentRootNode.style.right="0";
                componentRootNode.style.top="0";
                componentRootNode.style.margin="auto";
            }
        }

        componentRootNode.style.zIndex="999";
        componentRootNode.style.width="20rem";
        componentRootNode.style.left=screenHelper.clientLeftMarginInRem+"rem";

        componentRootNode.style.borderTop="1px solid var(--borderColor)";
        //console.log(view.style.getPropertyValue("--popup-background-color"));
        componentRootNode.style.backgroundColor="var(--popup-background-color)";//view.style.getPropertyValue("--popup-background-color");
        if(!this.mask && !isFull){
            this.mask=document.createElement("div");
            this.mask.className="weui-mask";
            document.body.appendChild(this.mask)
        }
        document.body.appendChild(componentRootNode);
        return componentRef;
    }
}
